<template>
  <div class="scroll" ref="scroll" @touchstart="touchStart">
    <div class="scroll-wrapper">
      <div class="pullDown" v-if="pullDownRefresh">
        <slot name="pullDown">
          <template v-if="pullingDown">
            <loading></loading>
          </template>
          <template v-else>
            {{pullDownText}}
          </template>
        </slot>
      </div>
      <slot></slot>
      <div class="scroll-load" v-if="pullUpLoad && pullUpText">
        <slot name="pullUpLoad">
          <template v-if="!loadingEnd">
            <loading></loading>
          </template>
          <template v-else>
            没有更多了~
          </template>
        </slot>
      </div>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll';
  import loading from '@/components/loading/loading';
  export default {
    props: {
      data: {
        default() {
          return '';
        }
      },
      // 监听滚动
      listingScroll: {
        type: Boolean,
        default: false
      },
      // 是否下拉刷新
      pullDownRefresh: {
        type: Boolean,
        default: false
      },
      // 是否上拉刷新
      pullUpLoad: {
        type: Boolean,
        default: false
      },
      // 上拉刷新文字
      pullUpText: {
        type: Boolean,
        default: true
      },
      // 下拉提示文字内容
      pullDownText: {
				type: String,
				default: '下拉刷新'
      },
      // 滑动顶部或尾部是否有缓动动画
      bounce: {
        type: Boolean,
        default: true
      },
      probeType: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        pullingDown: false,
        loadingText: true,
        loadingEnd: false
      }
    },
    mounted() {
      this._initScroll();
    },
    methods: {
			touchStart(e){
				this.$emit('touchStart',e)
      },
      _initScroll() {

        let option = {
          click: true,
          probeType: this.probeType,
          bounce: this.bounce
        };

        if (this.pullDownRefresh) {
          option.pullDownRefresh = { threshold: 50 };
        }

        if (this.pullUpLoad) {
          option.pullUpLoad = { threshold: 10 };
        }

        this.scroll = new BScroll(this.$refs.scroll, option);
        if (this.listingScroll) {
          this.scroll.on('scroll', (pos) => {
            this.$emit('scroll', pos.y);
          });
        }
        this.scroll.on('pullingDown', () => {
          this.pullingDown = true;
          this.$emit('pullingDown')
        });
        this.scroll.on('pullingUp', () => {
          this.$emit('pullingUp');
        });
      },
      // 下拉刷新完成
      finishPullDown() {
        setTimeout(()=>{
          this.pullingDown = false;
        },500);
        this.scroll && this.scroll.finishPullDown();
      },
      // 上拉刷新完成
      finishPullUp() {
        this.scroll && this.scroll.finishPullUp();
      },
      // 开启上拉刷新
      openPullUp() {
        this.scroll && this.scroll.openPullUp();
        this.loadingEnd = false;
      },
      // 关闭上拉刷新（数据全部加载完成）
      closePullUp() {
        this.scroll && this.scroll.closePullUp();
        this.loadingEnd = true;
      },
      // 更新DOM
      refresh() {
        this.scroll && this.scroll.refresh()
      },
      // 跳转
      scrollToY(y) {
        this.scroll && this.scroll.scrollTo(0, y, 0)
      },
      // 跳转
      scrollTo() {
        this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
      },
      // 跳转
      scrollToElement() {
        this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
      }
    },
    watch: {
      data() {
        setTimeout(() => {
          this.refresh();
        }, 40)
      }
    },
		activated () {
			this.refresh();
    },
    components: {
      loading
    }
  }
</script>

<style lang="less">
  @import '../../common/less/variable';
  .scroll{
    .scroll-wrapper{
      position: relative;
    }
    .pullDown{
      position: absolute;
      width: 100%;
      left: 0;
      top: -40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-size: @font-size-medium;
      .loading{
        img{
          display: inline-block;
          vertical-align: middle;
          padding-right: 5px;
        }
        .desc{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .scroll-load{
      font-size: @font-size-medium;
      padding: 10px 0;
      text-align: center;
    }
  }
</style>
